<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="文件编号" min-width="220">
          <el-input v-model="listQuery.documentCode" type="text" size="mini" />
        </el-form-item>
        <el-form-item label="是否签收">
          <el-checkbox
            v-model="listQuery.signForStatus"
            type="text"
            size="mini"
            true-label="1"
            false-label="0"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      <div class="filter-container" />
      <div>
        <el-form
          v-if="multipleSelection.length >= 1"
          :inline="true"
          :model="listQuery"
          class="filter-container"
        >
          <el-form-item label="批量操作">
            <el-button
              class="filter-item"
              size="mini"
              round
              icon="el-icon-document-checked"
              @click="batchSignFor"
            >
              批量签收
            </el-button>
          </el-form-item>
        </el-form>
        <el-table
          v-if="list"
          v-loading="listLoading"
          height="500"
          :data="list"
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            fixed
            :selectable="checkboxT"
          />
          <el-table-column
            label="流程类型"
            prop="flowTypeName"
            width="120"
            sortable
          />
          <el-table-column
            label="文件编号"
            prop="documentCode"
            min-width="220"
            sortable
          />
          <el-table-column
            label="文件名称"
            prop="documentName"
            align="left"
            min-width="200px"
            show-overflow-tooltip
          />
          <el-table-column
            label="文件版本"
            prop="documentVersion"
            align="center"
            width="100px"
          />
          <el-table-column
            label="是否签收"
            prop="signForStatus"
            align="center"
            width="100px"
          >
            <template slot-scope="{ row }">
              <el-tag v-if="row.signForStatus == 0" size="mini" type="danger"
                >未签收</el-tag
              >
              <el-tag v-else size="mini" type="success">已签收</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="签收时间"
            prop="signForTimeString"
            align="center"
            width="150px"
          />
          <el-table-column
            label="生效时间"
            prop="effectDate"
            align="center"
            width="150px"
          />
          <el-table-column
            label="是否自学"
            prop="selfStudy"
            align="center"
            width="100px"
          >
            <template slot-scope="{ row }">
              <el-tag v-if="row.selfStudy == 0" size="mini" type="danger"
                >未自学</el-tag
              >
              <el-tag v-else size="mini" type="success">已自学</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="60px"
            fixed="right"
          >
            <template slot-scope="{ row }">
              <el-dropdown trigger="click" class="filter-item">
                <el-button type="text"><i class="el-icon-more" /></el-button>
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                  <el-dropdown-item @click.native.prevent="examine(row)"
                    >预览</el-dropdown-item
                  >
                  <el-dropdown-item @click.native.prevent="history(row)"
                    >历史版本</el-dropdown-item
                  >
                  <el-dropdown-item v-if="row.signForStatus == 0" divided />
                  <!--  == 0 &&
                      Date.parse(row.effectDate) < new Date() -->
                  <el-dropdown-item
                    v-if="row.signForStatus == 0"
                    @click.native.prevent="signFor(row)"
                    >签收
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="row.signForStatus == 1"
                    @click.native.prevent="sellStudy(row)"
                    >开始自学
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="row.selfStudy == 1"
                    @click.native.prevent="selStudyRecord(row)"
                    >自学记录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page-number.sync="listQuery.pageNumber"
          :page-size.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      title="历史版本"
      :visible.sync="dialogVisible"
      width="60%"
      class="dialog-le"
    >
      <span slot="footer" class="dialog-footer">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            class="tac"
            prop="documentCode"
            label="文件编号"
            min-width="220"
          />
          <el-table-column
            class="tac"
            prop="documentName"
            label="文件名称"
            width="180"
            show-overflow-tooltip
          />
          <el-table-column prop="version" class="tac" label="版本号" />
          <el-table-column
            prop="level"
            class="tac"
            label="文件等级"
            :formatter="
              (row, column, cellValue) => {
                return levelList[cellValue]
              }
            "
          />
          <el-table-column
            prop="latestVersionFlag"
            class="tac"
            label="是否最新版本"
            :formatter="
              (row, column, cellValue) => {
                return latestVersionFlagList[cellValue]
              }
            "
          />
          <el-table-column prop="versionComment" class="tac" label="描述">
            <template slot-scope="scope">
              <el-tooltip effect="dark" placement="top">
                <div
                  slot="content"
                  v-html="ToBreak(scope.row.versionComment)"
                />
                <div class="oneLine">
                  {{ scope.row.versionComment }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="button" type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <LearnRecord
      :show-learn-record.sync="showLearnRecord"
      :document-id="documentId"
    />
    <!-- ------------------- -->
    <div>
      <iframe
        id="iframeMapViewComponent"
        ref="iframeDom"
        name="iframeMap"
        width="100%"
        height="470px"
        src="http://www.baidu.com/"
        frameborder="0"
        scrolling="no"
        style="display: none"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  signInProcessing,
  getHistoryData,
  signFor,
  pushBatchSignFor
} from '@/api/xd/documentFlow'
import { listDictTreeItem } from '@/api/base/dict'
import LearnRecord from '@/components/learnRecord/index'
import '@/styles/flow.scss'

export default {
  components: { Pagination, LearnRecord },
  data() {
    return {
      latestVersionFlagList: {
        0: '最新版本',
        1: '否'
      },
      levelList: {
        0: '普通文件',
        1: '一级文件',
        2: '二级文件',
        3: '三级文件',
        4: '四级文件'
      },
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        signForStatus: null,
        documentCode: null,
        effectFlag: true
      },
      list: null,
      total: 0,
      listLoading: true,
      documentId: '',
      dialogVisible: false,
      tableData: [],
      showLearnRecord: false,
      input: '',
      multipleSelection: []
    }
  },
  mounted() {
    listDictTreeItem({ dictGroupCode: 'flow_type' }).then((response) => {
      const array = response.data || []
      array.splice(0, 0, { label: '全部', value: null })
      this.flowTypeOptions = array
    })
    this.getList()
  },
  methods: {
    selStudyRecord(row) {
      this.showLearnRecord = true
      this.documentId = row.documentId
    },
    sellStudy(row) {
      console.log('row', row)
      if (row.fileExtension === '.pdf') {
        window.open(
          'onlyoffice/studyDocumentPDF.html?&token=' +
            this.$store.getters.token +
            '&documentId=' +
            row.documentId +
            '&urldata=' +
            process.env.VUE_APP_BASE_API
        )
        return
      }
      window.open(
        'onlyoffice/studyDocument.html?&token=' +
          this.$store.getters.token +
          '&documentId=' +
          row.documentId +
          '&mode=view' +
          '&urldata=' +
          process.env.VUE_APP_BASE_API
      )
    },
    async getList() {
      this.listLoading = true
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      await signInProcessing(this.listQuery)
        .then((response) => {
          this.list = response.data.rows
          this.total = response.data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    // 查看
    examine(data) {
      this.documentId = data.documentId
      console.log(this.documentId)
      if (data.fileExtension === '.pdf') {
        window.open(
          'onlyoffice/createDocumentPDF.html?&token=' +
            this.$store.getters.token +
            '&documentId=' +
            this.documentId +
            '&urldata=' +
            process.env.VUE_APP_BASE_API
        )
        return
      }
      window.open(
        'onlyoffice/createDocument.html?&token=' +
          this.$store.getters.token +
          '&documentId=' +
          this.documentId +
          '&mode=view' +
          '&urldata=' +
          process.env.VUE_APP_BASE_API
      )
    },
    // 签收
    signFor(row) {
      signFor({ documentReleaseId: row.documentReleaseId }).then((res) => {
        this.$message.success('签收成功')
        this.getList()
      })
    },
    // 历史版本
    async history(data) {
      const documentId = data.documentId
      this.dialogVisible = true
      const tableDataList = await getHistoryData({ documentId: documentId })
      this.tableData = tableDataList.data
    },
    ToBreak(val) {
      if (val.length > 30) {
        return val.match(/.{1,20}/g).join('<br/>')
      }
    },
    Printed(type) {},
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    batchSignFor() {
      const data = this.multipleSelection || []
      const pushData = []
      data.forEach((e) => {
        pushData.push(e.documentReleaseId)
      })
      pushBatchSignFor({ documentReleaseIdList: pushData }).then((res) => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    checkboxT(row) {
      if (row.signForStatus === 0) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style scope >
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* .item{
  color: #000;
	background: rgba(255, 255, 255, 0.279) !important;
	box-shadow: 1px 1px 10px 3px #D3D3D6;
} */
/deep/ .el-dialog__body {
  padding: 0;
}

/deep/ .el-table__row {
  text-align: center;
}

.button {
  margin-top: 20px;
}

.tac {
  text-align: center;
}
</style>
